<template>
 <div id="buycart">
    <div class="info">
        <span>30天无忧退货</span>
        <span>48小时快速退款</span>
        <span>满88免邮费</span>
    </div>

    <div class="list">

        <div class="cartItem" v-for="(item,index) in cartList" :key="index">
            <van-checkbox @change="checkEvent($event,item)" v-model="item.checked">
            </van-checkbox>
             <van-image
            fit="cover"
            width="70"
            height="70"
            :src="item.list_pic_url"
            />
            <div class="proBrief">
                <div class="title"><span >{{item.goods_name}}</span><span class="num">x{{item.number}}</span></div>
                <p class="brief">{{item.goods_specifition_name_value}}</p>
                <p class="price">￥ {{item.retail_price}}</p>
            </div>
        </div>
    </div>
    <div>
    <!-- 下单栏 -->
    <van-submit-bar class="submitBtn"
    
    :price="cartTotal.checkedGoodsAmount*100" button-text="去下单" @submit="onSubmit">
        <van-checkbox v-model="checkedAll">全选 <van-button type="default" hairline>编辑</van-button></van-checkbox>
    </van-submit-bar>
    </div>
    
    <!-- 底部导航栏 -->
    <tab-btn></tab-btn>
 </div>
</template>
<script>
import {mapState} from 'vuex'
import axios from 'axios'
import tabBtn from '@/components/tabBtn.vue'
let mapStateObj=mapState(['cartTotal','cartList'])
 export default {
     data(){
         return{
            checked:true,
            countParams:0,
            checkedGoodsNum:0
         }
     },
     methods:{
         onSubmit(){
             this.$router.push({path:'/order',query:{
                 countParams:this.countParams,
                 checkedGoodsNum:this.checkedGoodsNum
                 
             }})
             
         },
         async checkEvent(event,item){
             //console.log(item)
             let res=await axios.post(this.$root.api.CartChecked,{
                 isChecked:Number(event),
                 productIds:item.product_id
             })
             let data=res.data.data
             console.log(data)
             this.$store.commit('setCartList',data.cartList)
             this.$store.commit('setCartTotal',data.cartTotal)
             this.countParams=data.cartTotal.checkedGoodsAmount
             this.checkedGoodsNum=data.cartTotal.checkedGoodsCount
             //console.log(this.countParams)

         }
     },
     computed:{
         ...mapStateObj,
         checkedAll:{
             set(val){
                 
             },
             get(){
                 if(this.cartTotal.goodsCount==this.cartTotal.checkedGoodsCount){
                     return true
                 }else{
                     return false
                 }
             }
         }
     },
     created(){
         this.$store.dispatch('AjaxCart')
     },
     mounted(){
         //console.log(this.cartList)
     },
     components:{
         tabBtn
     }
         
     
 }
 </script>
<style lang="less">
#buycart{
    .submitBtn{
        margin-bottom: 50px !important;
    }
    .info{
        display: flex;
        justify-content: space-around;
        font-size: 11px;
        color: #999;
        height: 24px;
        line-height: 24px;
        background: #efefef;
        span{
            position: relative;
        }
        span::before{
            content: "";
            display: block;
            position: absolute;
            left: -10px;
            top: 8px;
            width: 4px;
            height: 4px;
            border-radius: 2px;
            border: 1px solid red;
        }
    }
    .cartItem{
        display: flex;
        align-items: center;
        padding: 10px 5px;
        .van-checkbox{
            margin: 0 5px;
        }
        .van-image{
            background: #efefef;

        }
        .proBrief{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 70px;
            align-items: flex-start;
            padding: 0px 10px;
        }
        .title{
            width: 100%;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
        }
        .brief{
            color: #999;
            font-size: 12px;
        }
    }
    
}
</style>